<template>
	<div id="userComment">
		<h2 class="text-info">用户的评论</h2>
		<div v-for="comment in comments" :key="comment.id">
			<div class="card cardSize fl">
				<div class="card-header">帖子标题：
					<router-link :to="{path: '/main/comment',query:{id: comment.commPostId}}">{{comment.postTitle}}</router-link>

				</div>
				<div class="card-body word-wrap">评论：<span v-html="comment.commContent"></span></div>
				<div class="card-footer">时间：<span>{{comment.commTime | timef}}</span></div>
			</div>
			<input type="button" value="删除" @click="deleteUserComment(comment.id)" class="btn btn-warning fr" />
		</div>
		<v-pagination :total="total" :current-page='current' :display='display' @pagechange="pagechange" style="clear: both;"></v-pagination>
	</div>

</template>

<script>
	import pagination from '../pagination.vue'
	export default {
		data() {
			return {
				total: 0, // 记录总条数
				display: 3, // 每页显示条数
				current: 1, // 当前的页数
				comments: {},
				commentsAll: {},
				userId: '',
				comment: {
					commContent: '',
					id: '',
					commTime: ''
				}
			}
		},
		created() {
			this.userId = this.$store.state.user[0].id;
			this.getComment();
		},
		methods: {
			getComment() {
				this.current = 1;
				this.$http.get('/api/userComment', {
					params: {
						id: this.userId
					}
				}).then(data => {
					if(data.status == 200) {
						
						this.total = data.body.length;
						var start = 0;
						var end = this.display;
						this.commentsAll = data.body;
						// this.pagechange(1);
						if(this.total >= end) {
							this.comments = this.commentsAll.slice(start, end);
						} else {
							this.comments = this.commentsAll.slice(start, this.total);
						}
					}
				}, err => {
					console.log(err);
				})
			},

			deleteUserComment(commentId) {
				var sure = confirm("是否删除？");
				if(sure == true) {
					this.$http.get('/api/deleteUserComment', {
						params: {
							id: commentId
						}
					}).then(data => {
						if(data.status == 200) {
							console.log("删除成功");
							this.getComment();
						}
					}, err => {
						console.log(err);
					})
				}

			},

			pagechange: function(currentPage) {
				this.current = currentPage;
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				var start = (this.current - 1) * this.display;
				var end = this.current * this.display;
				if(this.total >= end) {
					this.comments = this.commentsAll.slice(start, end);
				} else {
					this.comments = this.commentsAll.slice(start, this.total);
				}
			}
		},
		components: {
			'v-pagination': pagination,
		}
	}
</script>

<style scoped>
	#userComment {
		width: 600px;
		margin: 0 auto;
	}
	
	input[type="button"] {
		width: 80px;
		margin-top: 50px;
	}
</style>